<template>
  <div class="custom-tree-container">
    <div class="block">
      <p>web系统菜单管理</p>
      <!-- show-checkbox,这里不需要 
    default-expand-all默认展开所有节点，也不需要
      -->
      <el-tree
        :span="12"
        :data="menuData"
        node-key="wm_code"
        :default-expanded-keys="config.defaultOpen"
        :default-checked-keys="config.defaultOpen"
        :expand-on-click-node="false"
        :props="config.defaultProps"
      >
        <!--slot-scope  有两个参数  node 代表当前点击节点,  data代表当前点击节点的绑定数据-->
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <!--提取当前节点下面的lable属性-->
          <span>{{ data.wm_name }}</span>
          <span>
            <el-button type="text" size="mini" @click="() => addShow(data, node)">添加子菜单</el-button>
            <el-button type="text" size="mini" @click="() => updateShow(data)">编辑当前菜单</el-button>
            <el-button type="text" size="mini" @click="() => remove(node, data)">删除当前菜单</el-button>
          </span>
        </span>
      </el-tree>
    </div>

    <el-dialog :title="config.editType == 1 ? '模块添加' : '模块修改'" :visible.sync="config.isShowEdit">
      <el-form ref="form" :model="menuInfo" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单Code" :prop="config.editType == 1 ? 'wm_code' : ''">
              <el-input v-model="menuInfo.wm_code" :disabled="config.editType == 1 ? false : true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="wm_name">
              <el-input v-model="menuInfo.wm_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="父菜单Code">
              <el-input v-model="menuInfo.wm_parent_code" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父菜单名称">
              <el-input v-model="menuInfo.parentName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="菜单级别">
              <el-input v-model="menuInfo.wm_level" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="排序" prop="wm_order">
              <el-input v-model.number="menuInfo.wm_order"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否有效">
              <el-switch
                v-model="menuInfo.wm_status"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单url">
              <el-input v-model="menuInfo.wm_url"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="关联模块">
            <!-- module_name 
            label:'module_name',
              children:'sonModules',   -->
          <el-cascader
            v-model="menuInfo.wm_module_code"
            :options="module_options"
            :props="{
                label:'module_name',
                children:'sonModules',
              checkStrictly: true,
              value: 'module_code',
              emitPath: false,
            }"
            clearable
          ></el-cascader>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="config.editType == 1 ? moduleAdd() : moduleUpdate()"
          >{{ config.editType == 1 ? "立即创建" : "修改保存" }}</el-button>
          <el-button @click="config.isShowEdit=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
let id = 1000;
import {
  VMenuCode,
  GetWebSystemMenuDtosAll,
  GetModuleDtosAll,
  GetMViewByCode,
  WebSystemMenuPoUpdate,
  WSMAdd
} from "./WebSystemMuenManagerApi";

export default {
  data() {
    //验证modelcode是否唯一
    var vModuleCode = (rule, value, callback) => {
      console.log("a");
      if (!value) {
        return callback(new Error("菜单code不能是空的"));
      } else {
        
        VMenuCode(this.menuInfo.wm_code).then(r => {
          if (r.data) {
            callback();
          } else {
            callback(new Error("菜单Code已经被使用,请从重新输入菜单Code"));
          }
        });
      }
    };
    return {
      config: {
        //当前页面配置
        defaultOpen: [], //默认打开节点
        defaultProps: {
          //设置tree配置
          children: "sonWebSystemMenuViewList"
        },
        editType: 1, //编辑类型 1代表添加  2代表修改
        isShowEdit: false
      },
      module_options: [], //模块数据
      menuData: [],
      menuInfo: {
        wm_code: "",
        wm_name: "",
        wm_order: -1,
        wm_status: 1,
        wm_module_code: ""
      },

      rules: {
        wm_code: [
          { validator: vModuleCode },
          { required: true, message: "请输入菜单Code" }
        ],
        wm_name: [{ required: true, message: "请输入菜单名称" }],
        wm_order: [
          { required: true, message: "排序不能为空" },
          { type: "number", message: "排序必须为数字" }
        ]
      }
    };
  },
  created() {
    this.iniMenuData();
  },

  methods: {
    // 初始化菜单  显示
    iniMenuData() {
      //   this.$myaxios
      //     .get("WebSystemMenuManager/GetWebSystemMenuViewsAll")
      GetWebSystemMenuDtosAll().then(r => {
        this.menuData = r.data;
        if (r.data.length > 0) {
          this.config.defaultOpen.push(r.data[0].wm_code);
        }
      });
    },
    iniModuleCascader() {
      //初始化模块级联选择数据
      //   this.$myaxios.get("ModuleManager/GetModuleDbViewsAll")
      GetModuleDtosAll().then(r => {
        this.module_options = r.data;
      });
    },
    updateShow(data) {
      this.iniModuleCascader();
      //显示修改当前节点
      this.config.editType = 2;
      this.config.isShowEdit = true;
      //   this.$myaxios
      //     .get("WebSystemMenuManager/GetMViewByCode", {
      //       params: { code: data.wm_code },
      //     })
      GetMViewByCode(data.wm_code).then(r => {
        this.menuInfo = r.data;
      });
    },
    // 修改
    moduleUpdate() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          //   this.$myaxios
          //     .post("WebSystemMenuManager/WebSystemMenuUpdate", this.menuInfo)
          WebSystemMenuPoUpdate(this.menuInfo).then(r => {
            if (r.data) {
              this.$message("修改成功");
              this.config.isShowEdit = false;
              this.config.editType = 1;

              this.iniMenuData();
              this.config.defaultOpen.push(this.menuInfo.wm_parent_code);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 添加显示dolog弹框
    addShow(data, node) {
      //显示添加子节点    dataa参数代表点击的当前节点的数据
      this.iniModuleCascader();
      this.config.editType = 1;
      this.config.isShowEdit = true;
      this.menuInfo = {
        wm_parent_code: data.wm_code,
        parentName: data.wm_name,
        wm_level: data.wm_level + 1,
        wm_order: -1,
        wm_status: 1,
        wm_module_codes: []
      };
      //在显示之前,把添加对象重置
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
    // 子节点添加保存
    moduleAdd() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 这里要的不是数组，字符串就可以（写成数组的）
          //  if(this.menuInfo.wm_module_codes&&this.menuInfo.wm_module_codes.length>0)this.menuInfo.wm_module_code=this.menuInfo.wm_module_codes[0]

          //   this.$myaxios
          //     .post("WebSystemMenuManager/WSMAdd", this.menuInfo)
          WSMAdd(this.menuInfo).then(r => {
            if (r.data) {
              this.$message("添加成功");
              this.config.isShowEdit = false;
              this.iniMenuData();
              this.config.defaultOpen.push(this.menuInfo.wm_parent_code);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>